.slide-motion(@className, @keyframeName, @componentName, @duration: calc(@transition-duration - 0.1s)) {
  .@{className} {
    .@{componentName}&-active {
      animation-name: ~'@{keyframeName}In';
      animation-duration: @duration;
      animation-timing-function: @ease-out;
    }
    .@{componentName}&.hidden {
      animation-name: ~'@{keyframeName}Out';
      animation-duration: 0.1s;
      animation-timing-function: @ease-in;
    }
  }
}

.slide-motion(topLeft, kdSlideDown, kd-dropdown);
.slide-motion(top, kdSlideDown, kd-dropdown);
.slide-motion(topRight, kdSlideDown, kd-dropdown);
.slide-motion(leftBottom, kdSlideDown, kd-dropdown);
.slide-motion(rightBottom, kdSlideDown, kd-dropdown);

.slide-motion(left, kdSlideCenter, kd-dropdown);
.slide-motion(right, kdSlideCenter, kd-dropdown);

.slide-motion(leftTop, kdSlideUp, kd-dropdown);
.slide-motion(bottomLeft, kdSlideUp, kd-dropdown);
.slide-motion(bottom, kdSlideUp, kd-dropdown);
.slide-motion(bottomRight, kdSlideUp, kd-dropdown);
.slide-motion(rightTop, kdSlideUp, kd-dropdown);

.slide-motion(topLeft, kdSlideDown, kd-cascader-menus);
.slide-motion(bottomLeft, kdSlideUp, kd-cascader-menus);

.slide-motion(topLeft, kdSlideDown, kd-select-dropdown-panel);
.slide-motion(bottomLeft, kdSlideUp, kd-select-dropdown-panel);

.slide-motion(topLeft, kdSlideDown, kd-date-picker-panel);
.slide-motion(bottomLeft, kdSlideUp, kd-date-picker-panel);

.slide-motion(topLeft, kdSlideDown, kd-city-picker-dropdown);
.slide-motion(bottomLeft, kdSlideUp, kd-city-picker-dropdown);

@keyframes kdSlideCenterIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scaleY(0.6);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 50%;
    opacity: 1;
  }
}
@keyframes kdSlideCenterOut {
  0% {
    opacity: 1;
  }
  5% {
    transform: scaleY(1);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scaleY(0.6);
    transform-origin: 100% 50%;
    opacity: 0;
  }
}
@keyframes kdSlideUpIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scaleY(0.6);
    transform-origin: 0% 0%;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes kdSlideUpOut {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}
@keyframes kdSlideDownIn {
  0% {
    opacity: 0;
  }
  5% {
    transform: scaleY(0.6);
    transform-origin: 100% 100%;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

@keyframes kdSlideDownOut {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
}
